<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SmartMad Monitor</title>
<link rel="stylesheet" href="../assets/css/bootstrap-spacelab.css" />
<link rel="stylesheet" href="../assets/css/base.css?t=20130516173114" />

  <!-- template
    ================================================== -->
<script id="t_a" type="text/html">
	<table class="table table-striped table-bordered table-condensed">
		<thead>
			<tr><th>站点</th><th>用于监测的url</th><th>统计类型</th><th>状态</th><th>操作</th></tr>
		</thead>
		<tbody>
    <% for (var i in list) { var item = list[i]; %>
		<tr>
		<td><%= i %></td>
		<td><%= item.url %><br /></td>
		<td><% if(item.type == 1) { %>访问<% } else{ %>下载 <% } %> </td>
		<td><% if(item.enable*1){ %>
			<span>启用</span>
		    <% }else{ %>	
		   	<span>禁用</span>
			<% } %> 
		</td>
		<td>
			<div>
			<% if(item.enable*1){ %>
			<button class="btn" name="edit" data-name="<%= i %>" title="修改"><i class="icon-edit"></i></button>&nbsp;&nbsp;
			<button class="btn" name="unable"  data-name="<%= i %>" ><i class="icon-ban-circle" title="禁用"></i></button>&nbsp;&nbsp;
			<button class="btn" name="del"  data-name="<%= i %>" title="删除"><i class="icon-trash"></i></button>&nbsp;&nbsp;
		    <% }else{ %>	
			<button class="btn" name="edit" data-name="<%= i %>" title="修改"><i class="icon-edit"></i></button>&nbsp;&nbsp;
			<button class="btn" name="able"  data-name="<%= i %>" ><i class="icon-ok-circle" title="启用"></i></button>&nbsp;&nbsp;
			<button class="btn" name="del"  data-name="<%= i %>" title="删除"><i class="icon-trash"></i></button>&nbsp;&nbsp;
			<% } %> 
			<button class="btn" name="view" data-name="<%= i %>" title="查看报表"><i class="icon-search"></i></button>
			</div>
		</td>		
		</tr>
    <% } %>
	</tbody>
	</table>
</script>

<style type="text/css">
#siteList{ line-height:1.8;}

tr td:nth-child(1) {
	width:20%;
}
tr td:nth-child(2) {
	width:40%;
}
tr td:nth-child(3) {
	width:7%;
}
tr td:nth-child(4) {
	width:7%;
}
tr td:nth-child(5) {
	width:26%;
}
tr td:nth-child(5) div{
	visibility:hidden;
}
</style>

</head>

<body>
    <header>
        <h1>站点列表</h1>
        <div id="toolbar">
        	<div class="box_1">
 				<button class="btn" id="create"><i class="icon-plus-sign"></i> 创建监控站点</button>
        	</div>
        </div> 
    </header>	

    <div id="mainbody">
        <div id="siteList">
        </div>
    </div>

  <!-- js part
    ================================================== -->
<script src="../assets/js/library/jquery-1.7.1.js"></script>
<script src="../assets/js/library/bootstrap.min.js"></script>
<script src="../assets/js/library/template.js"></script>
<script src="../assets/js/helper.js?t=20130516173114"></script>
<script src="../assets/js/doc.js?t=20130516173114"></script>		
<script>
$(function(){
	var smartMad = window.smartMad = window.smartMad || {};
    var version = urlParams('version');
    var domain = domainURI();
    var $siteList = $('#siteList');
    var _url = "http://" + domain + "/mmsapi" + version;
    
	//创建站点
	$('#create').click(function(){
		location.href = 'editSite.html?version=' + version;
	});
	
    /////////////////////////////////////////////////////
	
    $siteList.bind('ajax.success', function(e, json){
    
        var $th = $(this), data, html;
        
        //$th.html(JSON.stringify(json));return;
        ///////////////////////////////////////////////
        data = {
			list:json
		};
        
        html = template('t_a', data);
        $th.html(html);
		
		//////////////////////////////////////////////////////////////////////////
		
		$th.find('table').delegate('tr','mouseover',function(){
			$(this).find('div').css('visibility','visible');
		});
		$th.find('table').delegate('tr','mouseout',function(){
			$(this).find('div').css('visibility','hidden');
		});		
		
		//查看站点报表
		$th.delegate('button[name="view"]','click',function(){
			location.href = "viewReport.html?version=" + version +'&id=' + $(this).attr('data-name');
		});
		
		//修改站点
		$th.delegate('button[name="edit"]','click',function(){
			location.href = "editSite.html?version=" + version +'&id=' + $(this).attr('data-name');
		});
		
		//删除站点
		$th.delegate('button[name="del"]','click',function(){
			if(!confirm('确定删除？')) return;
			var conf ={
				url:_url + '/delete/testspeed_site/@self/' + $(this).attr('data-name')
			};
			conf.loading = {parent:$(this)};
			$(this).parent().parent().parent().delData(conf);
		});
		
		//禁用
		$th.delegate('button[name="unable"]','click',function(){
			var name = $(this).attr('data-name');
			var conf = {};
			conf.data = json[name];
			conf.data.enable = 0;
			conf.url = _url +'/update/testspeed_site/@self/' + name;
			conf.loading = {parent:$(this)};
            conf.success = $.proxy(function(jqXHR, textStatus, errorThrown){
				var $th = $(this);
                $.tips('已经禁用!');
				$th.parent().parent().prev().find('span').text('禁用');
				$th.attr('name','able').html('<i class="icon-ok-circle" title="启用"></i>');
            }, this);
			
			//alert(JSON.stringify(conf));
			$(this).parent().postData(conf);
		});	
		
		//启用
		$th.delegate('button[name="able"]','click',function(){
			var name = $(this).attr('data-name');
			var conf = {};
			conf.data = json[name];
			conf.data.enable = 1;
			conf.url = _url +'/update/testspeed_site/@self/' + name;
			conf.loading = {parent:$(this)};
            conf.success = $.proxy(function(jqXHR, textStatus, errorThrown){
				var $th = $(this);
                $.tips('已经启用!');
				$th.parent().parent().prev().find('span').text('启用');
				$th.attr('name','unable').html('<i class="icon-ban-circle" title="禁用"></i>');
            }, this);
			
			//alert(JSON.stringify(conf));
			$(this).parent().postData(conf);
		});						
        
    });
    
    
    //取得站点列表数据
    $siteList.getData({
        url: _url + '/get/testspeed_site/@all'
    });
    
});
</script>
</body>
</html>
